<template>
  <div class="c-page">
    <div class="circle">
      <div class="pieChart1" ref="pieChart1"></div>
    </div>
    <div class="circle">
      <div class="pieChart2" ref="pieChart2"></div>
    </div>
  </div>
</template>
<script>
var value = 50;
var colorRegionRate = (value / 100).toFixed(2);
export default {
  data() {
    return {
      myChart1: null,
      myChart2: null,
      chartVal: 50,
      chart1Options: {
        title: {
          show: true,
          text: "产能利用率",
          subtextStyle: {
            align: "center",
          },
          left: 50,
          bottom: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 13,
            align: "center",
            fontFamily: '"Microsoft Yahei","微软雅黑"',
          },
        },
        series: [
          {
            type: "gauge",
            radius: "75%",
            center: ["50%", "50%"],
            splitNumber: 0, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  // 有数值的部分
                  [
                    colorRegionRate,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#FBE638", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#26FEE8", // 100% 处的颜色
                      },
                    ]),
                  ],
                  // 底色
                  [1, "#00323C"],
                ],
              },
              radius: 8,
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            title: {
              show: true,
              offsetCenter: [0, "-30%"], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: 20,
              },
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, "0%"],
              color: "#fff",
              size: 20,
              formatter: (params)=> {  return params + "%" },
              textStyle: {
                fontSize: 20,
              },
            },
            data: [
              {
                value: 50,
              },
            ],
          },
        ],
      },
      chart2Options: {
        title: {
          show: true,
          text: "均衡生产率",
          subtextStyle: {
            align: "center",
          },
          left: 50,
          bottom: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 13,
            align: "center",
            fontFamily: '"Microsoft Yahei","微软雅黑"',
          },
        },
        series: [
          {
            type: "gauge",
            radius: "75%",
            center: ["50%", "50%"],
            splitNumber: 0, //刻度数量
            startAngle: 225,
            endAngle: -45,
            roundCap:true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                color: [
                  // 有数值的部分
                  [
                    colorRegionRate,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#226BCB", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#57C8F5", // 100% 处的颜色
                      },
                    ]),
                  ],
                  // 底色
                  [1, "#00323C"],
                ],
              },
              radius: 8,
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            title: {
              show: true,
              offsetCenter: [0, "-30%"], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: 20,
              },
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, "0%"],
              color: "#fff",
              size: 20,
             formatter: (params)=> {  return params + "%" },
              textStyle: {
                fontSize: 20,
              },
            },
            data: [
              {
                value: 50,
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.createEchart1();
    this.createEchart2();
  },
  methods: {
    createEchart2() {
      this.myChart2 = this.$echarts
        .init(this.$refs.pieChart2)
        .setOption(this.chart2Options);
      window.addEventListener("resize", () => {
        this.myChart2.resize();
      });
    },
    createEchart1() {
      this.myChart1 = this.$echarts
        .init(this.$refs.pieChart1)
        .setOption(this.chart1Options);
      // this.myChart1.setOption(this.chart1Options, true);
      window.addEventListener("resize", () => {
        this.myChart1.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.c-page {
  width: 100%;
  height: 100%;
  padding: 5px;
  cursor: pointer;
  display: flex;
  .circle {
    flex: 1;
    .pieChart1,
    .pieChart2 {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
